<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单挂挂卡</title>
    <style>
        body{background:#f5f5f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:Arial,Helvetica,sans-serif}
        .box{width:90px;height:90px;background:#e0e0e0;border:1px solid #ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:.25s;user-select:none}
        .box.scratched{background:#fff;color:#333;cursor:default}
    </style>
</head>
<body>
    <div class="box" id="card">?</div>

    <script>
        const prizes=['一等奖','二等奖','三等奖','谢谢参与'];
        const card=document.getElementById('card');
        const prize=prizes[Math.floor(Math.random()*prizes.length)];
        
        card.addEventListener('click',()=>{
            if(card.classList.contains('scratched')) return;
            card.textContent=prize;
            card.classList.add('scratched');
        });
    </script>
</body>
</html>